"use client"
import {useActionState} from "react";
import {ActionState, EditUser} from "@/lib/zod/types";
import {editOrCreateUser} from "@/lib/action/user";
import {Label} from "@/components/ui/label";
import {Input} from "@/components/ui/input";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {Button} from "@/components/ui/button";
import {redirect, useRouter} from "next/navigation";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {UserOmitCreatedAtPartial} from "@/lib/zod/schema";
import {z} from "zod";
import {cn} from "@/lib/utils";


export default function UserInfo(props:{mode:"edit",userInfo:EditUser,successTargetUrl:string}|{mode:"add",successTargetUrl:string}) {
    const router = useRouter();
    let userInfo:z.infer<typeof UserOmitCreatedAtPartial>= {};
    if(props.mode === 'edit'){
         userInfo= props.userInfo
    }

    const [state, action, isPending] = useActionState<ActionState<z.infer<typeof UserOmitCreatedAtPartial>>, FormData>(
        editOrCreateUser,
        {
            code: 0,
            msg: ""
        }
    );

    if(state.code === 200){
        //成功后跳转目录
        return redirect(props.successTargetUrl);
    }

    return (
        <>
            <form action={action}>
                <div className={"flex items-center justify-center h-dvh"}>
                    <Card className={"m-2"}>
                        <CardHeader>
                            <CardTitle>{props.mode === 'edit' ? "修改用户" : "添加用户"}</CardTitle>
                            <CardDescription>{}</CardDescription>
                        </CardHeader>
                        <CardContent className={"flex flex-col gap-3 px-5"}>
                            <div className={"flex items-center w-full"}>
                                <Label className={"flex-shrink-0 w-20"}>用户名：</Label>
                                <div className={"flex items-center flex-col"}>
                                    <Input name={"username"} defaultValue={state.input?.username??userInfo.username}/>
                                    <p className={"text-sm text-red-500  text-start w-full"}>{state.errors?.username?.join("、")}</p>
                                </div>
                                {/*用户id*/}
                                {
                                    props.mode === 'edit' &&
                                    <Input type={"hidden"} name={"userId"} defaultValue={state.input?.userId??userInfo.userId}/>
                                }
                                <Input type={"hidden"} name={"mode"} defaultValue={props.mode}/>
                            </div>
                            <div className={"flex items-center w-full"}>
                                <Label className={"flex-shrink-0 w-20"}>性别：</Label>
                                <div className={"flex items-center flex-col flex-grow"}>
                                    <Select name={"sex"} defaultValue={state.input?.sex??userInfo.sex}>
                                        <SelectTrigger>
                                            <SelectValue placeholder="选择"/>
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value={"male"}>男</SelectItem>
                                            <SelectItem value={"female"}>女</SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <p className={"text-sm text-red-500  text-start w-full"}>{state.errors?.sex?.join("、")}</p>
                                </div>
                            </div>
                            <div className={"flex items-center w-full"}>
                                <Label className={"flex-shrink-0 w-20"}>邮箱：</Label>
                                <div className={"flex items-center flex-col"}>
                                    <Input name={"email"} defaultValue={state.input?.email??userInfo.email}/>
                                    <p className={"text-sm text-red-500 text-start  w-full"}>{state.errors?.email?.join("、")}</p>
                                </div>
                            </div>
                            <div className={"flex items-center w-full"}>
                                <Label className={"flex-shrink-0 w-20"}>密码：</Label>
                                <div className={"flex items-center flex-col"}>
                                    <Input type={"password"} name={"password"}
                                           defaultValue={props.mode === 'edit' ? (state.input?.password ?? "000000") : (state.input?.password ?? "")}/>
                                    <p className={"text-sm text-red-500  text-start w-full"}>{state.errors?.password?.join("、")}</p>
                                </div>
                            </div>
                            {
                                props.mode === 'edit'
                                &&
                                <div className={"flex items-center w-full"}>
                                    <Label className={"flex-shrink-0 w-20"}>状态信息：</Label>

                                    <div className={"flex items-center flex-col flex-grow"}>
                                        <Select name={"status"} defaultValue={state.input?.status??userInfo.status}>
                                            <SelectTrigger>
                                                <SelectValue placeholder="选择"/>
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value={"freeze"}>冻结</SelectItem>
                                                <SelectItem value={"active"}>激活</SelectItem>
                                                <SelectItem value={"banned"}>封禁</SelectItem>
                                            </SelectContent>
                                        </Select>
                                        <p className={"text-sm text-red-500  text-start w-full"}>{state.errors?.status?.join("、")}</p>
                                    </div>
                                </div>
                            }
                            <p className={cn("text-red-500 text-sm flex justify-end w-full ",{"text-green-400":state.code === 200})}>{state.msg}</p>
                            <div className={"flex justify-between items-center w-full"}>
                                <Button variant={"outline"} type={"submit"}
                                        disabled={isPending}>{isPending ? "提交中" : "提交"}</Button>
                                <Button variant={"link"} type={"button"} onClick={() => {
                                    router.push("/home/user")
                                }}>返回</Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </form>
        </>
    );
}
